<template>
    <div class="account-list">
        <header>
            <!-- 名称查询 -->
            <div class="search">
                 <el-form :inline="true" :model="searchData" class="demo-form-inline">
                   
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="moduleAdd" style="margin-bottom:20px;" size="medium">添加模块</el-button>
                </el-form>
            </div>
            
        </header>
        <!-- 列表 -->
        <div class="list">
            <div class="list-opate">
                <el-table :data="list.data" style="width: 100%">
                    <el-table-column align='center' prop="id" label="ID"  width="50" ></el-table-column>
                    <el-table-column align='center' prop="name" label="模块名称"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="moduleLook(scope.row)">查看权限</el-button>
                            <el-button type="text" size="small" @click="moduleEdit(scope.row)">编辑</el-button>
                            <el-button type="text" size="small" @click="moduleDel(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination :current-page="current" @current-change="handleCurrentChange" :total="list.total" style="margin-top:30px;"></el-pagination>
            </div>
        </div>
        <!-- 权限列表 -->
        <el-dialog title="权限" :visible.sync="renewVisible" width="70%" center>
            <el-button type="primary" icon="el-icon-circle-plus-outline" @click="authorityAdd" style="margin-bottom:20px;" size="medium">添加权限</el-button>
            <el-table :data="authlist.data" style="width: 100%">
                <el-table-column align='center' prop="id" label="ID"  width="50" ></el-table-column>
                <el-table-column align='center' prop="name" label="权限名称"></el-table-column>
                <el-table-column :formatter="authType" align='center' prop="type" label="权限类型"></el-table-column>
                <el-table-column align='center' prop="created_at" label="创建时间"></el-table-column>
                <el-table-column align='center' prop="updated_at" label="修改时间"></el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="authorityEdit(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="authorityDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination :current-page="authcurrent" @current-change="authhandleCurrentChange" :total="authlist.total" style="margin-top:30px;"></el-pagination>
        </el-dialog>
        <!-- 添加权限 -->
        <el-dialog :title="dialogtitle" :visible.sync="authVisible" width="35%" center>
            <el-form :inline="true" :model="authData" ref="authData" :rules="authrules">
                <el-form-item label="权限名称" prop="name">
                    <el-input v-model="authData.name" placeholder="请输入权限名称"></el-input>
                </el-form-item>
                <el-form-item label="权限类型" prop="type">
                    <el-select v-model="authData.type" placeholder="请输入权限类型">
                        <el-option label="按钮权限" value="1"></el-option>
                        <el-option label="字段权限" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel('authData')">取 消</el-button>
                <el-button type="primary" @click="submit('authData')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script src='../../contral/management_module.js'></script>

